/**
 * 开发环境
 */

const path = require('path')
const { merge } = require('webpack-merge')
const common = require('./webpack.config.common')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = merge(common, {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          outputPath: 'image',
        },
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        // 要排除的文件类型，务必把涉及到的都写上（webpack 默认解析 json，所以也写上）
        exclude: /\.(css|less|js|json|html|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'media',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],

  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    open: true,
    hot: true,
  },
  devtool: 'cheap-module-eval-source-map',
})
